<template>
  <div class="invitef">
    <vheader pageTitle="邀请好友" backUrl="/mine"></vheader>
    <div class="invitef-top">
      <strong @click="toInviteHistory">累计奖励</strong>
      <span @click="toInviteHistory">{{ sumAmount }}</span>
      <p @click="toInviteHistory">共邀请好友{{ countAward }}人，已投资有效好友{{ investCount }}人</p>
      <ul>
        <li @click="toInviteHistory">
          <p>邀请奖(元)</p>
          <p>{{ yaoqingjiang.toFixed(2) }}</p>
        </li>
        <li @click="toThanksDetail">
          <p>答谢奖(元)</p>
          <p>{{ daxiejiang.toFixed(2) }}</p>
        </li>
        <li @click="toNextThanksDetail">
          <p>预计待发放(元)</p>
          <p>{{ wffdaxiejiang.toFixed(2) }}</p>
        </li>
      </ul>
    </div>
    <div class="invitef-mid">
      <p>每成功邀请一位好友投资您将获得<span>80元现金</span>奖励</p>
      <p>还享好友投资收益的<span>8%的答谢奖</span></p>
      <p>+</p>
      <p>该好友复投您再获得<span>30元现金奖励</span></p>
      <p>好友投资收益的<span>8%的答谢奖</span></p>
      <p><span style="color: #3fadf9" @click="toInviteRule">查看详细规则>></span></p>
    </div>
    <div class="invitef-bot">
      <qrcode :value="val" :size="size" :bg-color="bgColor" :fg-color="fgColor" level="L" type="image"></qrcode>
      <p>请好友扫描上方的二维码或长按分享给好友</p>
      <div class="invitef-bot-url">
        <span>邀请链接：</span>
        <input type="text" v-model="val">
      </div>
    </div>
  </div>
</template>

<script>
  import vheader from 'components/common/comHead'
  import Qrcode from 'v-qrcode'

  export default {
    data () {
      return {
        val: '',
        size: 200,
        bgColor: '#FFFFFF',
        fgColor: '#000000',
        wffdaxiejiang: 0,
        yaoqingjiang: 0,
        daxiejiang: 0,
        investCount: 0,
        invitCount: 0,
        sumAmount: 0,
        countAward: 0
      }
    },
    computed: {
      loginName () {
        return this.$store.state.user.invitationCode
      }
    },
    methods: {
      toInviteRule () {
        this.$router.push('/inviteRule')
      },
      toInviteHistory () {
        this.$router.push('/inviteHistory')
      },
      toThanksDetail () {
        this.$router.push('/thanksDetail')
      },
      toNextThanksDetail () {
        this.$router.push('/nextThanksDetail')
      }
    },
    created () {
      const acctKey = this.$cookie.get('acctKey')
      const rootPath = 'http://m.fenmiaojinrong.com' // 好友测试接口 http://m.fenmio.com 正式地址 http://m.fenmiaojinrong.com
      this.$http.get(`/api/member/memberInviteAward/memberInviteAwardCount?acctKey=${acctKey}`)
        .then((res) => {
          if (res.data.success) {
            console.log(res.data.data)
            this.wffdaxiejiang = res.data.data.sumNoExpressAmount
            this.yaoqingjiang = res.data.data.sumAwardAmount
            this.daxiejiang = res.data.data.sumExpressAmount
            this.countAward = res.data.data.countAward
            this.investCount = res.data.data.countInviteAward
            this.sumAmount = this.yaoqingjiang + this.daxiejiang
            this.val = `${rootPath}/invitedetail?invitNum=${this.loginName}`
          }
        })
    },
    components: {
      vheader,
      qrcode: Qrcode
    }
  }
</script>

<style lang='scss'>
  @import '../../common/scss/_variable.scss';

  .invitef {
    &-top {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 476px;
      font-size: 28px;
      color: $base-fff;
      background: url(../../assets/yq_sbg@3x.png) 0 0 no-repeat;
      background-size: cover;
      text-align: center;
      &>strong {
        margin-top: 70px;
      }
      &>span {
        margin-top: 30px;
        font-size: 42px;
      }
      &>p {
        margin-top: 70px;
        font-size: 30px;
      }
      ul {
        display: flex;
        align-items: center;
        margin: 20px 40px 0 40px;
        align-items: center;
        border-top: 1px solid $base-fff;
        height: 200px;
        li {
          border-right: 1px solid $base-fff;
          height: 100px;
          padding-top: 10px;
          flex: 1;
          &:nth-last-child(1) {
            border-right: 0;
          }
          p {
            &:nth-child(2) {
              margin-top: 34px;
            }
          }
        }
      }
    }
    &-mid {
      margin-top: 30px;
      p {
        font-size: 28px;
        color: $base-333;
        text-align: center;
        line-height: 50px;
        span {
          color: $base-ff6c00;
        }
      }
    }
    &-bot {
      margin-top: 40px;
      text-align: center;
      font-size: 28px;
      color: $base-999;
      p {
        line-height: 60px;
      }
      &-url {
        padding: 30px 0 60px 0;
        display: flex;
        justify-content: center;
        align-items: center;
        span {
          font-size: 32px;
          color: $base-333;
        }
        input {
          outline: none;
          height: 30px;
          height: 40px;
          line-height: 40px;
          border: 1px solid $base-e5e5e5;
        }
      }
    }
  }
</style>
